<template>
  <div style="padding: 2px 20px;background-color: #fff;width: 99%;margin: 5px auto 0px">
    <BiddersModal v-model="open" :taskId="selectedTaskId" :item="item"  @onSuccess="onSuccess" />
    <DynamicForm :labelWidth="85" style="margin-top: 20px;" :searchloading="loading" :items="items" v-model="formModel" @onFinish="submit">
    </DynamicForm>
    <div style="margin-top: 20px;">
      <MultifunctionalModal @onFinish="onFinish" ref="verifyMdodal" :action="ActionEnum.PROJECT_VERFY" title="审核" />
      <ElTableWithColumns @onChange="onChange" :loading="loading" :data="tableData" :columns="columns" :pagerInfo="pagerInfo" :operateColProps="{ width: 180 }">
        <template #operate="{row}">
          <el-space>
            <el-tag type="primary" style="cursor: pointer;"   v-hasPermi="['payment:task:query']"  @click="viewDetail(row as TaskInfo)" >详情 </el-tag>
            <!-- <el-tag  type="success" style="cursor: pointer;margin-left:2px;" @click="verify(row)">审核</el-tag> -->
            <el-tag  type="success" style="cursor: pointer;margin-left:2px;"  v-hasPermi="['payment:task:selPerson']"  @click="selectedTaskId = row.id; item = row; open = true">选定竞标人</el-tag>
          </el-space>
        </template>
      </ElTableWithColumns>
    </div>
    <Detail  :openCheck="openDetailCheck" @dialogClose="dialogClose2" :item="item"></Detail>

  </div>
</template>

<script lang="ts" setup>
import DynamicForm from '@/components/DynamicForm/index.vue';
import { HttpStatus } from '@/enums/RespEnum';
import MultifunctionalModal from '../SharedComponents/MultifunctionalModal.vue';
import { ActionEnum } from '../types.js'
import useDictUtilsStore from '@/store/modules/dict_utils'
import useUserStore from '@/store/modules/user'
import Detail from "@/views/project/proSel/detail/index.vue"

import BiddersModal from './BiddersModal.vue';

import { TaskInfo } from '../types'

const { getlabel } = useDictUtilsStore()
const openDetailCheck = ref(false);

const open = ref(false)
const selectedTaskId = ref('')

const pagerInfo = reactive({
  pageSize: 10,
  total: 0,
  pageNum: 1
})

const { proxy } = getCurrentInstance() as ComponentInternalInstance

/**
 * 接单类型
*/
const taskTypeOptions = computed(() => {
  const list = proxy?.useDict("task_type").task_type
  return list
})

/**
 * 业务类型
*/
const businessTypeOptions = proxy?.useDict("wxfe_bus_type").wxfe_bus_type

/**
 * 项目状态
*/


/**
 * 上下架
*/
const proStatusoptions = proxy?.useDict("pro_status").pro_status


const dialogClose2  = (params:any)=>{
    openDetailCheck.value = false;
}

const loading = ref(false)

const tableData = ref([])
const item = ref({})

const viewDetail = (row: TaskInfo) => {
  openDetailCheck.value = true;
  item.value = row;
  // router.push (`/project/projectDetail?id=${row.id}`)
}

/**
 * 项目状态
*/
// const taskStatusOptions = proxy?.useDict("task_status").task_status
const taskStatusOptions =computed(() => {
  const list = proxy?.useDict("task_status").task_status
  return list
})



const columns = [
  {
    title: '创建时间',
    dataIndex: 'addTime',
    width: 160
  },
  {
    title: '企业名称',
    dataIndex: 'merchantName',
    width: 160
  },
  {
    title: '服务商名称',
    dataIndex: 'gsmc',
    width: 220
  },
  {
    title: '项目编号',
    dataIndex: 'no',
    width: 140
  },
  {
    title: '项目标题',
    dataIndex: 'name',
    width: 150
  },
  {
    title: '服务金额（元）',
    dataIndex: 'taskCode',
    renderText: (row: TaskInfo) => {
      const {costMax,classify} = row
      if(classify == 1){
        return proxy?.convertFenToYuan(row.cost) +" ~ "+ proxy?.convertFenToYuan(row.costMax);
      }else{
        return `${proxy?.convertFenToYuan(row.cost)}`
      }
    },
    width: 120
  },
  {
    title: '接单类型',
    dataIndex: 'classify',
    width: 120,
    renderText: row => {
         return getlabel('task_type', row.classify)
    }
  },
  {
    title: '业务类型',
    dataIndex: 'busType',
    width: 160,
    renderText: row => {
         return getlabel('wxfe_bus_type', row.busType)
    }
  },
  {
    title: '项目状态',
    dataIndex: 'taskStatus',
    width: 160,
    renderText: row => {
         return getlabel('task_status', row.taskStatus)
    }

  },
  {
    title: '上架状态',
    dataIndex: 'status',
    width: 160,
    renderText: row => {
        return getlabel('pro_status', row.status)
    }
  },
]


const formModel = ref({})


const items = computed(() => {
  return [
    { prop: 'addTime1', label: '创建时间', valueType: 'date', fieldProps: { type: 'daterange', valueFormat: 'YYYY-MM-DD','start-placeholder':"开始日期",'end-placeholder':"结束日期"   }},
    { prop: 'no', label: '项目编号', valueType: 'input' , fieldProps: {placeholder:"请输入项目编号"}},
    { prop: 'name', label: '项目标题', valueType: 'input' , fieldProps: {placeholder:"请输入项目标题"} },
    { prop: 'taskStatus', label: '项目状态', valueType: 'select', options: taskStatusOptions.value , fieldProps: {placeholder:"请选择项目状态"}},
    { prop: 'classify', label: '接单类型', valueType: 'select', options: taskTypeOptions?.value  , fieldProps: {placeholder:"请选择接单类型"}},
  ]
})

const verifyMdodal = ref<{ onVerify?: (data: TaskInfo) => void }>()

const verify = (row) => {
  verifyMdodal?.value?.onVerify!(row)
}

const query = async (formData = {}) => {
  loading.value = true
  let defaultProvider = useUserStore().defaultProvider;

  const submitData = {
    ...formData,
    ...pagerInfo
  }

  if( formData.addTime1 && formData.addTime1.length > 1 ){
      submitData.beginDate = formData.addTime1[0];
      submitData.endDate = formData.addTime1[1];
  }

  submitData.classify = 2;
  submitData.sydId = defaultProvider.sydId;

  const { response } = await useRequest('/payment/task/checkList', 'GET', {
    params: submitData
  }, { immediate: true, onFinish: () => {
    loading.value = false
  } })
  if (response.value.code === 200) {
      tableData.value = response.value.rows
      pagerInfo.total = response.value.total
  }

  // if (err) {
  //   ElMessage.error('获取列表失败')
  // } else {
  //   const { code } = res
  //   if (code === HttpStatus.SUCCESS) {
  //     tableData.value = res?.result?.records
  //     pagerInfo.total = res.result?.total
  //   }
  // }
}

const onSuccess = () => {
  open.value = false
  query()
}
const onFinish = (response) => {
  if (response.value.code === 200) {
    ElMessage.success('操作成功')
    query()
  }
}


const onChange = ({data, type}) => {
  if (type === 'pageNo') {
    pagerInfo.pageNum = data
  }
  if (type === 'pageSize') {
    pagerInfo.pageSize = data
  }
  query()
}

const submit = data => {
  query(data)
}

onMounted(() => {
  query()
})
</script>
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
